﻿<%@page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="java.text.SimpleDateFormat,java.util.Calendar"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	Calendar cal = Calendar.getInstance();
	Calendar cal2 = Calendar.getInstance();
	cal.set(Calendar.DAY_OF_MONTH,31);
	cal2.set(Calendar.DAY_OF_MONTH,1);
	SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
	String today = format.format(cal.getTime());
	String oneday = format.format(cal2.getTime());
%>
<!DOCTYPE HTML>
<html>
	<head>
		<base href="<%=basePath%>">
		<META http-equiv=Content-Type content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link type="text/css" rel="stylesheet" href="include/css/welcome.css" />
		<link type="text/css" rel="stylesheet" href="include/css/css.css" />
		<link type="text/css" rel="stylesheet" href="include/css/bootstrap.css" />
		<link type="text/css" rel="stylesheet" href="include/css/bootstrap-datetimepicker.min.css" />
		<link rel="stylesheet" href="include/jqgrid/css/ui.jqgrid.css" type="text/css"/>
		<link type="text/css" rel="stylesheet" href="include/iconFont/1.0.8/iconfont.css"/ >
		<link rel="stylesheet" href="include/css/H-ui.css" type="text/css"/>
		<link rel="stylesheet" href="include/icheck/icheck.css" type="text/css"/>
		<script type="text/javascript" src="include/js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="lib/echarts/echarts.js"></script>
		<script type="text/javascript" src="include/jqgrid/js/jquery.jqGrid.src.js"></script>
		<script type="text/javascript" src="include/jqgrid/js/i18n/grid.locale-cn.js"></script>
		<script type="text/javascript" src="include/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="include/js/bootstrap-datetimepicker.js"></script>
		<script type="text/javascript" src="include/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
		<script type="text/javascript" src="include/layer/layer.js"></script>
	 	<link rel="stylesheet" href="include/jqgrid/css/css/gray1/jquery-ui.css" type="text/css"></link></head>
	<script type="text/javascript">
		var dom;
		var myChart;
		window.onload=function(){
			
			$('.form_datetime').datetimepicker({
		        format: 'yyyy-mm-dd',
		        language: 'zh-CN',
		        pickDate: false,
		        pickTime: false,
		        hourStep: 1,
		        minuteStep: 15,
		        secondStep: 30,
		        autoclose: true,
		        pickerPosition:'bottom-left',
		        inputMask: true,
		        startView: 'year',
		        minView:'month'
		    });
			getCustomers();
			getSetupType();
			getSetupStates();
			getProducts();
			dom = document.getElementById("container2");
			myChart = echarts.init(dom);
			
			setupCountView();
		}
		
		function setupCountView()
		{
			myChart = echarts.init(dom);
			var getType = $("#getType")[0].value;
			var customer = $("#customer")[0].value;
			var setuptype = $("#setuptype")[0].value;
			var classify = $("#classify")[0].value;
			var setupstate = $("#setupstate")[0].value;
			var spec = $("#spec")[0].value;
			var begintime = $("#begintime").val();
			var endtime = $("#endtime").val();
			
			myChart.setOption({
	             title: {text: '产品数量统计图'},
	             tooltip: {trigger : 'axis'},
	             legend: {show : true,data:['安装数量']},
	             xAxis: {"type":"category","axisLabel":{interval: 0},data: []},
	             yAxis: {},
	             series: [{name: '安装数量',type: 'bar',data: [],
		             markLine : {data : [{type : 'average', name: '平均值'}]}
	             }],
	             calculable : true,
	             toolbox : {
						show : true,
						feature : {
							mark : {show : true},
							dataView : {show : true,readOnly : true},
							magicType : {show : true,type : [ 'line', 'bar' ]},
							saveAsImage : {show : true}
						}
					},
	         });
			 myChart.showLoading();
			 BringViews(getType,customer,setuptype,classify,setupstate,spec,begintime,endtime);
		}
		
		function setupAccountView()
		{
			myChart = echarts.init(dom);
			var getType = $("#getType")[0].value;
			var customer = $("#customer")[0].value;
			var setuptype = $("#setuptype")[0].value;
			var classify = $("#classify")[0].value;
			var setupstate = $("#setupstate")[0].value;
			var spec = $("#spec")[0].value;
			var begintime = $("#begintime").val();
			var endtime = $("#endtime").val();
			
			myChart.setOption({
	             title: {text: '产品安装金额统计图'},
	             tooltip: {trigger : 'axis'},
	             legend: {show : true,data:['金额（元）']},
	             xAxis: {"type":"category","axisLabel":{interval: 0},data: []},
	             yAxis: {},
	             series: [{name: '金额（元）',type: 'bar',data: [],
		             markLine : {data : [{type : 'average', name: '平均值'}]}
	             }],
	             calculable : true,
	             toolbox : {
						show : true,
						feature : {
							mark : {show : true},
							dataView : {show : true,readOnly : true},
							magicType : {show : true,type : [ 'line', 'bar' ]},
							saveAsImage : {show : true}
						}
					},
	         });
			
			 myChart.showLoading();
			 BringViews(getType,customer,setuptype,classify,setupstate,spec,begintime,endtime);
		}
		
		function BringViews(getType,customer,setuptype,classify,setupstate,spec,begintime,endtime)
		{
			var names=[];
			var nums=[]; 
			$.ajax({
         	type : "post",
         	async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
         	url : "AccountAciton/getAccountViewCreate.action",    //请求发送到TestServlet处
         	data : {"getType":getType,"customer":customer,"setuptype":setuptype,
					"classify":classify,"setupstate":setupstate,"spec":spec,
					"begintime":begintime,"endtime":endtime},
         	dataType : "json",        //返回数据形式为json
         	success : function(result) {
             	//请求成功时执行该函数内容，result即为服务器返回的json对象
             	if (result) {
                    for(var i=0;i<result.length;i++){       
                       names.push(result[i][1]);    //挨个取出类别并填入类别数组
                     }
                    for(var i=0;i<result.length;i++){       
                        nums.push(result[i][0]);    //挨个取出销量并填入销量数组
                      }
                    myChart.hideLoading();    //隐藏加载动画
                    
                    myChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '账目信息（数量、金额）',
                            data: nums
                        }]
                    });
             	}
		        },
	         	error : function(errorMsg) {
	            //请求失败时执行该函数
	         	alert("图表请求数据失败!");
					myChart.hideLoading();
	         	}
	    	})
		}
		
		function getSetupType()
		{
			var ddl = $("#setuptype");
            $.ajax({
				type: "POST",
				url: "JqueryAction/getSetupTypes.action",
				dataType: "json",
				async:false,
				cache:false, 
				success: function(datas)
				{
					for(var i=0;i<datas.length;i++)
					{
						ddl.append("<option value="+datas[i].id+">"+datas[i].repairName+"</option>");
					}
				}
			});
		}
		
		function getCustomers()
		{
			var ddl = $("#customer");
            $.ajax({
				type: "POST",
				url: "JqueryAction/getCustomers.action",
				dataType: "json",
				async:false,
				cache:false, 
				success: function(datas)
				{
					for(var i=0;i<datas.length;i++)
					{
						ddl.append("<option value="+datas[i].customerType+">"+datas[i].customerName+"</option>");
					}
				}
			});
		}
		
		function getSetupStates()
		{
			var ddl = $("#setupstate");
            $.ajax({
				type: "POST",
				data:{"statusType":"SETUPTYPE"},
				url: "JqueryAction/getSetupState.action",
				dataType: "json",
				async:false,
				cache:false, 
				success: function(datas)
				{
            		document.getElementById("classify").options.length=1;
					for(var i=0;i<datas.length;i++)
					{
						ddl.append("<option value="+datas[i].statusValue+">"+datas[i].statusName+"</option>");
					}
				}
			});
		}
		
		function getProducts()
		{
			var ccid = $("#customer")[0].value;
			var ddl = $("#classify");
			var ccl = $("#spec");
			document.getElementById("classify").options.length=0;
            $.ajax({
				type: "POST",
				data:{"custid":ccid},
				url: "JqueryAction/getProducts.action",
				dataType: "json",
				async:false,
				cache:false, 
				success: function(datas)
				{
					if(null == datas)
					{
						document.getElementById("classify").options.length=0;
						document.getElementById("spec").options.length=0;
						
						ddl.append("<option value=''>全部</option>");
						ccl.append("<option value=''>全部</option>");
					}
					else
					{
						document.getElementById("classify").options.length=1;
						
						for(var i=0;i<datas.length;i++)
						{
							ddl.append("<option value="+datas[i].id+">"+datas[i].typeName+"</option>");
						}
					}
				}
			});
		}
		
		function getProductSpec()
		{
			var ccl = $("#spec");
			var pvalue = $("#classify")[0].value;
			
			$.ajax({
				type: "POST",
				data:{"proid":pvalue},
				url: "JqueryAction/getProductSpec.action",
				dataType: "json",
				success: function(datas)
				{
					if(null == datas)
					{
						document.getElementById("spec").options.length=0;
						ccl.append("<option value=''>全部</option>");
					}
					else
					{
						document.getElementById("spec").options.length=1;
					
						for(var i=0;i<datas.length;i++)
						{
							ccl.append("<option value="+datas[i].id+">"+datas[i].specName+"</option>");
						}
					}
					
				}
			});
		}
			
			function changeicon()
			{
				if(!$("#icon1").is(":hidden"))
				{
					$("#icon2").show(); 
					$("#icon1").hide();
				}
				else
				{
					$("#icon2").hide(); 
					$("#icon1").show();
				}
			}
			
			function tijiao()
			{
				var getType = $("#getType")[0].value;
				
				if(1 == getType)
				{
					setupCountView();	
				}
				if(2 == getType)
				{
					setupAccountView();
				}
			}
	</script>
	<body>
		<div class="panel-body" style="padding-bottom:0px;text-align: right;margin-top: -13px;">
		<div class="panel panel-primary" style="margin-top: 5px">
		<div class="panel-heading" style="text-align: left;">查询统计条件
		<a style="line-height: 1.6em;float: right;text-decoration:none;" 
					data-toggle="collapse" data-parent="#accordion" 
				   href="#collapseOne" title="收起" onclick="changeicon();">
				   <i id="icon1" class="Hui-iconfont" style="color:white;display: block;">&#xe6d6;</i>
				   <i id="icon2" class="Hui-iconfont" style="color: white;display: none;">&#xe6d5;</i>
				</a></div>
		
		<div id="collapseOne" class="panel-collapse collapse in">
		<div class="panel-body2">
			<div class="text-l">
			<p>
				<span style="padding-left: 0px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>查询统计方式：</b></font>
				</span>
				<span class="select-box inline radius" > 
					<select id="getType" name="getType" class="select" style="width: 130px">
						<option value="1" selected>按数量统计产品</option>
						<option value="2">按金额统计产品</option>
					</select> 
				</span>
				<span style="padding-left: 25px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>产品客户：</b></font>
				</span>
				<span class="select-box inline radius" > 
					<select id="customer" name="customer" class="select" style="width: 103px" onclick="getProducts();">
						<option value="" selected="selected">全部</option>
					</select> 
				</span>
				<span style="padding-left: 25px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>安装类型：</b></font>
				</span>
				<span class="select-box inline radius" > 
					<select id="setuptype" name="setuptype" class="select" style="width: 120px">
					</select> 
				</span> 
				<span style="padding-left: 25px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>产品分类：</b></font>
				</span>
				<span class="select-box inline radius" > 
					<select id="classify" name="classify" class="select" style="width: 108px" onchange="getProductSpec();">
					</select> 
				</span> 
				</p>
				<p>
				<span style="padding-left: 23px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>安装时间：</b></font>
				</span>
				<span class="select-box inline radius" style="width: 142px;"> 
					<input size="16" style="width: 130px;height: 25px;" type="text" value="<%=oneday %>" readonly class="form_datetime form-control" id="begintime" name="begintime"/>
				</span>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<span class="select-box inline radius" style="width: 142px;"> 
					<input size="16" style="width: 130px;height: 25px;" type="text" value="<%=today %>" readonly class="form_datetime form-control" id="endtime" name="endtime"/>
				</span>
				<span style="padding-left: 26px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>安装状态：</b></font>
				</span>
				<span class="select-box inline radius" > 
					<select id="setupstate" name="setupstate" class="select" style="width: 120px">
						<option value="" selected="selected">全部</option>
					</select> 
				</span> 
				<span style="padding-left: 25px">
					<font style="font-size: 12px;text-align: left;color: gray;"><b>产品规格：</b></font>
				</span>
				<span class="select-box inline radius" > 
					<select id="spec" name="spec" class="select" style="width: 108px">
						<option value="" selected="selected">全部</option>
					</select> 
				</span> 
				<span style="float: right;margin-right: 15px;">
					<a href="javascript:;" id="queryUser" style="line-height: 1.7em;height: 33px"
					class="btn btn-primary radius" onclick="tijiao();"><i class="Hui-iconfont">&#xe665;</i>
					生成图表&nbsp;</a>
				</span>
				</p>
			</div>
			</div>
			</div>
			</div>
			</div>
			<div style="margin-left:15px;margin-top: -10px;">
				<div class="page-container">
					<div id="container2" style="height: 380px;"></div>
				</div>
			</div>
	</body>
</html>